import React, { Component } from 'react'
import { hashHistory } from 'react-router'
import { Icon } from 'antd-mobile'
import { FooterTab } from '../common'
import { AccountRow } from './'

export default class AccountPage extends Component {
  render() {
    return (
      <div className={`rt-account-page-container cm-flex-container`}>
        <div className={`rt-top-box`}>
          <div className={`rt-left-box`}>
            <div className={`cm-avatar-circle`} />
            <span className={`rt-nickname`}>微信名：vp2016</span>
          </div>

          <div className={`rt-right-box`}>
            <img alt="auth" src={require('static/images/auth.png')} />
            <Icon type="question" />
          </div>
        </div>
        {/*<div className={`rt-top-box`}>
          <div className={`rt-left-box`}>
            <span className={`rt-account-name`}>帐户名称：13000007893</span>
            <img alt="auth" src={require('static/images/auth.png')} />
          </div>

          <div className={`rt-right-box`}>
            <i className={`iconfont icon-question`} />
          </div>
        </div>*/}

        <div className={`rt-balance-coupon-box`}>
          <div className={`rt-descriptor`}>
            <span>账户余额（元）</span>
            <span>赠券余额：</span>
          </div>
          <div className={`rt-balance`}>
            <span>323,686.90</span>
            <span>800.00元</span>
          </div>
          <div className={`rt-btn-grp`}>
            <div
              onClick={() => hashHistory.push('/blue-ui/recharge')}
            >
              <i className={`iconfont icon-question`}></i>
              <span>充值</span>
            </div>
            <div>
              <i className={`iconfont icon-question`}></i>
              <span>提现</span>
            </div>
          </div>
        </div>

        <div className={`rt-scrollable-container`}>
          <AccountRow
            className={`cm-margin-top`}
            title="实名认证"
            onClick={() => {
              hashHistory.push('/blue-ui/centification')
            }}
          />
          <AccountRow
            title="持仓明细"
            onClick={() => hashHistory.push('/blue-ui/positions')}
          />
          <AccountRow
            title="历史交易"
            onClick={() => hashHistory.push('/blue-ui/historical-transaction')}
          />
          <AccountRow title="收支明细" />
          <AccountRow
            title="赠券"
            onClick={() => {
              hashHistory.push('/blue-ui/gift-coupon')
            }}
          />
          <AccountRow
            title="体验券"
            rgtExtra={<span>4张可领</span>}
            onClick={() => {
              hashHistory.push('/blue-ui/experience-ticket')
            }}
          />
          <AccountRow
            title="银行卡"
            onClick={() => {
              hashHistory.push('/blue-ui/bank-cards')
            }}
          />
          <AccountRow
            className={`cm-margin-top`}
            title="安全设置"
            onClick={() => {
              hashHistory.push('/blue-ui/profile')
            }}
          />
          <AccountRow title="通知公告" />
          <AccountRow lftIcon="leaf" title="账户切换" />
        </div>

        <div className={`rt-footer-tab-box`}>
          <div>
            <Icon type="line-chart" />
            <span>微盘</span>
          </div>
          <div>
            <Icon type="bar-chart" />
            <span>中盘</span>
          </div>
          <div className={`rt-tab-active`}>
            <Icon type="user" />
            <span>账户</span>
          </div>
          <div>
            <Icon type="question" />
            <span>财经</span>
          </div>
          <div>
            <Icon type="question" />
            <span>排行</span>
          </div>
        </div>
      </div>
    )
  }
}